<template>
    <div style="height: 100%; width: 100%; position: relative" ref="maindev">
        <div class="pagetop">
            <div style="width: 100%">
            <div style="float: left; width: 100%">
                <table style="font-size: 12px" class="table2style" border="0">
                    <tr>
                        <td>混样日期</td>
                        <td style="width:170px">
                            <el-date-picker v-model="startdt" type="datetime" placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 170px" :clearable="false"></el-date-picker>
                        </td>
                        <td style="text-align:center">至</td>
                        <td style="width:170px">
                            <el-date-picker v-model="enddt" type="datetime" placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 170px" :clearable="false"></el-date-picker>
                        </td>
                        <td>混样人</td>
                        <td width="120px">
                            <rm-ddl-common v-model="mixuser" datatype="userinfo" kindno="1" width="120px" :clearable="true" @change="mixuserChange"></rm-ddl-common>
                        </td>
                        <td>需导出内容</td>
                        <td width="120px"> 
                            <el-select v-model="exporttype" style="width: 100%">
                                <el-option key="1" label="主记录" value="1"></el-option>
                                <el-option key="2" label="明细" value="2"></el-option>
                            </el-select>
                        </td>
                        <td>混样条码</td>
                        <td><el-input v-model="mixbarcode" style="width: 140px" clearable></el-input></td>
                        
                    </tr>
                    <tr>
                        <td>混样明细条码</td>
                        <td>
                            <el-input v-model="mixdetailbarcode" style="width: 170px" clearable></el-input>
                        </td>
                        <td>病人姓名</td>
                        <td><el-input v-model="patname" size="mini" style="width: 100%"></el-input></td>
                        <td>病人号</td>
                        <td><el-input v-model="patno" size="mini" style="width: 100%"></el-input></td>
                        <td>病人卡号</td>
                        <td>  <el-input  v-model="patcardno" size="small" style="width:100%;" ></el-input></td>
                        <td>身份证号</td>
                        <td>
                            <el-input v-model="patidcard" size="mini" style="width: 140px" clearable></el-input>
                        </td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div style="width: 100%; text-align: right">
              <table style="width: 100%">
                    <tr >
                        <td>
                            <el-button icon="el-icon-search" v-has="'PINQUERY'" type="primary" @click="BtnQuery">查询(F8)</el-button>
                            <el-button icon="el-icon-printer" @click="btnPrint()">混样条码补打</el-button>
                            <el-button @click.native="exportExcel" icon="el-icon-zoom-in">导出</el-button>
                            <el-button @click.native="ImportData" icon="el-icon-add">导入外部混样信息</el-button>
                        </td>
                    </tr>
              </table>
            </div>
            </div>
          
        </div>
        <div class="pagecenter">
            <rm-layout-right splitcolor="#ffffff" :splitwidth="2" :fixsize="750" :minfixsize="200" ref="layoutright">
                <vxe-table ref="mainTable" :data.sync="main_data" :loading="main_Loading" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border :height="reportheight" highlight-current-row @current-change="mainchange_Event" highlight-hover-column highlight-hover-row how-header-overflow resizable show-overflow size="mini" show-header-overflow :optimization="{ animat: false }" header-align="center">
                    <vxe-table-column type="index" title="序号" width="40" align="center"></vxe-table-column>
                    <vxe-table-column field="mixbarcode" sortable title="混样条码" width="115"></vxe-table-column>
                    <vxe-table-column field="mix_user" sortable title="混样人" width="80" align="center"></vxe-table-column>
                    <vxe-table-column field="mix_dt" sortable title="混样时间" width="125"></vxe-table-column>
                    <vxe-table-column field="mixnum" sortable title="包含样本数" width="80" align="center"></vxe-table-column>
                    <vxe-table-column field="statname" sortable title="状态" width="80" align="center"></vxe-table-column>
                </vxe-table>
                <template v-slot:fix>
                    <div class="right-inser">
                        <vxe-table ref="detailTable" :data.sync="detail_data" :loading="result_Loading" header-align="center" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="100%" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow resizable show-overflow size="mini" stripe show-header-overflow :optimization="{ animat: false }">
                            <vxe-table-column type="index" title=" 序号" width="40" align="center"></vxe-table-column>
                            <vxe-table-column field="barcode" sortable title="条码号" width="90"></vxe-table-column>
                            <vxe-table-column field="pat_name" sortable title="姓名" width="80" align="center"></vxe-table-column>
                            <vxe-table-column field="pat_sexname" sortable title="性别" width="40" align="center"></vxe-table-column>
                            <vxe-table-column field="pat_agestr" sortable title="年龄" width="40"></vxe-table-column>
                            <vxe-table-column field="pat_no" title="病人号" width="80"></vxe-table-column>
                            <vxe-table-column field="pat_idcardno" title="身份证号" width="80"></vxe-table-column>
                            <vxe-table-column field="pat_phone" title="联系电话" width="80"></vxe-table-column>
                            <vxe-table-column field="add_dt" sortable title="混样时间" width="120"></vxe-table-column>
                            <vxe-table-column field="add_username" sortable title="混样人" width="80" align="center"></vxe-table-column>
                            <vxe-table-column field="specimen_name" sortable title="标本类型" width="80"></vxe-table-column>
                            <vxe-table-column field="sample_items" sortable title="项目描述" width="120"></vxe-table-column>
                            <vxe-table-column field="req_docname" title="申请医生" width="120"></vxe-table-column>
                            <vxe-table-column field="req_deptname" title="申请科室" width="130" header-align="center"></vxe-table-column>
                            <vxe-table-column field="pat_address" title="病人联系地址" width="180" header-align="center"></vxe-table-column>
                            <vxe-table-column field="pat_cardno" title="就诊卡号" width="100" header-align="center"></vxe-table-column>
                            <vxe-table-column field="inp_id" title="住院标识" width="100" header-align="center"></vxe-table-column>
                            <vxe-table-column field="pat_id" title="病人唯一号" width="100" header-align="center"></vxe-table-column>
                        </vxe-table>
                    </div>
                </template>
            </rm-layout-right>
        </div>
        <el-dialog width="500px" top="2px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="信息注册" :visible.sync="popregistervisible">
            <table style="width: 90%; margin-left: 20px; font-size: 12px; border-collapse: separate; border-spacing: 5px">
                <tr>
                    <td colspan="5" style="text-align: left; padding-right: 10px">
                        <span style="font-size: 18px; color: red">{{ this.hospcodename }}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 10px">选项名称</td>
                    <td style="text-align: right" colspan="4">
                        <el-input v-model="optionname" :disabled="true"></el-input>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 10px">选项代码</td>
                    <td style="text-align: right" colspan="4">
                        <el-input v-model="optioncode" :disabled="true"></el-input>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 10px; vertical-align: top">注册码</td>
                    <td style="text-align: right" colspan="4">
                        <el-input v-model="registercode" type="textarea" :rows="10"></el-input>
                    </td>
                </tr>
                <tr>
                    <td colspan="5" style="text-align: center">
                        <el-button style="margin: 0px 10px 0px 5px" @click="registerSave">确定</el-button>
                        <el-button style="margin: 0px 10px 0px 5px" @click="registerCancel">取消</el-button>
                    </td>
                </tr>
            </table>
        </el-dialog>
        <el-dialog title="文件导入提示" :visible.sync="fileimportnotifyVisible" width="30%">
            <el-form :model="fileimportform">
                <el-form-item label="上传文件" :label-width="formLabelWidth">
                    <el-upload ref="uploadDat" action="" :limit="limitNum" :auto-upload="false" accept=".dat" :before-upload="beforeUploadFile" :on-change="fileimportChange" :on-exceed="exceedFile" :file-list="fileList">
                        <el-button size="small" plain>选择文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传DAT(*dat)文件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="uploadFile()">立即上传</el-button>
                <el-button @click="fileimportnotifyVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
import axios from "axios";
import XE from "xe-utils"; //引入工具类
export default {
    name: "LIS434",
    data() {
        const _that = this;
        return {
            main_Loading: false,
            main_data: [],
            startdt: this.$pub.InitDateTime2(0).datefrom,
            enddt: this.$pub.InitDateTime2(0).dateto,
            exporttype: "1",
            mixbarcode: "",
            mixuser: "",
            mixdetailbarcode:"",
            patname:"",
            patno:"",
            patcardno:"",
            patidcard:"",
            detail_data: [],
            result_Loading: false,
            tableColumn: [],
            excolPro: "LIS434",
            reportheight: "auto",
            pickerOptions: {
                //添加跳转今天
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                            _that.startdt = new Date();
                            _that.enddt = new Date();
                        },
                    },
                ],
            },
            optionname: "注册导入核酸采样小程序数据",
            optioncode: "REGOPT_IMPORTCVDSAMPLEINFO",
            popregistervisible: false,
            registercode: "", // 注册码
            fileimportnotifyVisible: false,
            isoverride: 0,
            limitNum: 1,
            fileimportform: {
                file: "",
            },
            fileList: [],
            formLabelWidth: "100px",
            hospcodename: "",
            barstyleid: "",
            mixusername: "",
        };
    },
    created() {
        //this.btn_clearselEvent();
    },
    mounted() {
        var _this = this;
        document.onkeydown = function (e) {
            let key = window.event.keyCode;
            switch (key) {
                case 119: //查询F8
                    _this.BtnQuery();
                    break;
            }
        };
        this.init();
    },
    updated() {},
    methods: {
        init() {
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS434",
                    method: "post",
                    data: {
                        action: "initoptions",
                    },
                })
                .then((response) => {
                    if (response.barstyleid) this.barstyleid = response.barstyleid;
                })
                .catch((e) => {});
        },
        BtnQuery() {
            this.main_Loading = true;
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS434",
                    method: "post",
                    data: {
                        action: "querymixlist",
                        startdt: this.startdt, // 开始时间
                        enddt: this.enddt, // 结束时间
                        mixuser: this.mixuser, // 检验科室
                        mixbarcode: this.mixbarcode,
                        mixdetailbarcode:this.mixdetailbarcode, // 混样明细条码
                        patname:this.patname,
                        patno:this.patno,
                        patcardno:this.patcardno,
                        patidcard:this.patidcard,
                    },
                })
                .then((res) => {
                    this.main_data = res.data;
                    this.detail_data = [];
                    this.main_Loading = false;
                    if (res.total > 5000) {
                        this.$message({
                            type: "info",
                            message: "超过5000行只显示前5000行数据！",
                        });
                    }

                    if (this.main_data.length > 0) {
                        this.$refs.mainTable.setCurrentRow(this.main_data[0]);
                        this.fuc_get_mixdetail(this.main_data[0]);
                    }
                })
                .catch((e) => {
                    this.$message.error(e);
                });
        },

        mainchange_Event({ row, rowIndex, column, columnIndex }, event) {
            this.fuc_get_mixdetail(row);
        },

        fuc_get_mixdetail(row) {
            this.result_Loading = true;
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS434",
                    method: "post",
                    data: {
                        action: "querymixdetail",
                        mixbarcode: row.mixbarcode,
                    },
                })
                .then((res) => {
                    this.detail_data = res.data;
                    this.result_Loading = false;
                })
                .catch((e) => {
                    this.$message.error(e);
                });
        },

        btnPrint() {
            let mixbarcode = "";
            let row = this.$refs.mainTable.getCurrentRow();
            if (row) mixbarcode = row.mixbarcode;

            if (!this.barstyleid) {
                this.$pub.message(this, "没有维护条码样式", "warning");
            } else {
                this.$pub.printbarcode(this, mixbarcode, "1", this.barstyleid, "");
            }
        },
        mixuserChange(code, name) {
            this.mixuser = code;
            this.mixusername = name;
        },
        exportExcel() {
            var rightlocalStorage = JSON.parse(window.localStorage.getItem(this.excolPro + "exCol"));
            let tableColumn = this.$refs.mainTable.getColumns();
            let exportdata = this.main_data;
            if (this.exporttype == "2") {
                tableColumn = this.$refs.detailTable.getColumns();
                exportdata = this.detail_data;
            }

            let exportColumn = [];
            if (rightlocalStorage && rightlocalStorage.length > 0) {
                rightlocalStorage.forEach((item) => {
                    exportColumn.push({
                        title: item.extitle ? item.extitle : item.title,
                        field: item.property,
                    });
                });
            } else {
                tableColumn.forEach((item) => {
                    exportColumn.push({ title: item.title, field: item.property });
                });
            }
            let filtertxt = this.getExportFilter();
            this.$pub.exportTableExcel(exportdata, exportColumn, "LIS434 混样记录信息.xlsx", filtertxt);
        },
        // 获取当前导出文件的所有查询条件
        getExportFilter() {
            let filtertxt = "混样日期:" + XE.toDateString(this.startdt, "yyyy-MM-dd") + "至" + XE.toDateString(this.enddt, "yyyy-MM-dd ") + "; ";
            if(this.mixuser) filtertxt += "混样人:" + this.mixusername + "; ";
            if(this.exporttype) filtertxt += "需导出内容:" + (this.exporttype == "1" ? "主记录" : "明细") + "; ";
            if(this.mixbarcode) filtertxt += "混样条码:" + this.mixbarcode + "; ";
            if(this.mixdetailbarcode) filtertxt += "混样明细条码:" + this.mixdetailbarcode + "; ";
            if(this.patname) filtertxt += "病人姓名:" + this.patname + "; ";
            if(this.patno) filtertxt += "病人号:" + this.patno + "; ";
            if(this.patcardno) filtertxt += "病人卡号:" + this.patcardno + "; ";
            if(this.patidcard) filtertxt += "身份证号:" + this.patidcard + "; ";
            return filtertxt;
        },
        ImportData() {
            //this.fileimportnotifyVisible = true;
            // this.popregistervisible = true;
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS434",
                    method: "post",
                    data: {
                        action: "checkregister",
                    },
                })
                .then((res) => {
                    if (res.flag == "1") {
                        // 弹出导入文件窗
                        this.fileimportnotifyVisible = true;
                    } else {
                        this.hospcodename = res.hospcodename;
                        // 弹出注册窗
                        this.popregistervisible = true;
                    }
                })
                .catch((e) => {
                    this.$message.error(e);
                });
        },

        registerSave() {
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS434",
                    method: "post",
                    data: {
                        action: "registersave",
                        registercode: this.registercode,
                    },
                })
                .then((res) => {
                    if (res.errcode == "1") {
                        this.$message({
                            message: "注册成功！",
                            type: "success",
                        });
                        this.popregistervisible = false;
                    } else {
                        this.$message({
                            message: "注册失败！" + res.errmsg,
                            type: "warning",
                        });
                    }
                })
                .catch((e) => {
                    this.$message.error(e);
                });
        },

        registerCancel() {
            this.registercode = "";
            this.fileimportform.file = "";

            this.fileList = [];
            this.popregistervisible = false;
        },

        // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
        beforeUploadFile(file) {
            let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
            let size = file.size / 1024 / 1024;
            if (extension !== "dat") {
                this.$notify.warning({
                    title: "警告",
                    message: `只能上传DAT(*dat)文件`,
                });
            }
            // if (size > 10) {
            //     this.$notify.warning({
            //         title: "警告",
            //         message: `文件大小不得超过10M`,
            //     });
            // }
        },
        fileimportChange(file, fileList) {
            this.fileimportform.file = file.raw;
        },
        uploadFile() {
            if (this.fileimportform.file) {
                this.MainTableData = [];
                const loading = this.$loading({
                    // 声明一个loading对象
                    lock: true, // 是否锁屏
                    text: "正在导入信息，请稍候……", // 加载动画的文字
                    spinner: "el-icon-loading", // 引入的loading图标
                    background: "rgba(0, 0, 0, 0.3)", // 背景颜色
                    target: ".sub-main", // 需要遮罩的区域
                    body: true,
                    customClass: "mask", // 遮罩层新增类名
                });
                var URL = this.$tool.baseUrl.replace("api", "z") + "fileupload";
                let formData = new FormData();
                formData.append("file", this.fileimportform.file);
                formData.append("action", "LIS434-dat");
                formData.append("isoverrideall", this.isoverride);
                axios
                    .post(URL, formData, { "Content-Type": "multipart/form-data" })
                    .then((res) => {
                        loading.close();
                        if (res.status == 200) {
                            let response = res.data;
                            if (response.flag == "1") {
                                this.$message.success({
                                    title: "成功",
                                    message: `文件导入成功`,
                                });
                                this.fileimportnotifyVisible = false;
                            } else {
                                this.$message.error({
                                    title: "错误",
                                    message: `文件导入失败`,
                                });
                                this.fileimportnotifyVisible = true;
                            }
                        } else {
                            this.$message.error({
                                title: "错误",
                                message: `文件导入失败`,
                            });
                            this.fileimportnotifyVisible = true;
                        }
                        this.MainTable_Rfresh();
                    })
                    .catch((e) => {
                        console.log("error", e);
                    });
            } else {
                this.$alert("请先选择文件再导入！");
            }
        },
        // 文件超出个数限制时的钩子
        exceedFile(files, fileList) {
            this.$notify.warning({
                title: "警告",
                message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`,
            });
        },
    },
};
</script>

<style scoped>
::v-deep .el-checkbox__inner::after {
    border: 2px solid #000000 !important;
    box-sizing: content-box;
    content: "";
    border-left: 0 !important;
    border-top: 0 !important;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform 0.15s ease-in 0.05s;
    transform-origin: center;
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #000000;
    cursor: not-allowed;
}
::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner,
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner + .el-input.is-disabled .el-input__inner {
    background-color: #ffffff !important;
}
::v-deep .el-input--suffix .el-input__inner {
    padding-right: 5px;
}
.middle-tab-bottom {
    position: absolute;
    top: 0px;
    width: 100%;
    bottom: 0px;
    overflow: auto;
}
.pagetop {
    left: 0;
    right: 0;
    /* height: 100px; */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
}
.pagecenter {
    position: absolute;
    top: 100px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}
.pagebottom {
    position: absolute;
    width: 100%;
    left: 0;
    margin-top: 4px;
    height: 36px;
    bottom: 0px;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
}

.right-inser {
    position: absolute;
    top: 0;
    bottom: 0px;
    overflow: auto;
    width: 100%;
    right: 0px;
}

table tr td:nth-child(odd) {
    text-align: right;
    white-space: nowrap;
}
table tr td:nth-child(even) {
    text-align: left;
}
table tr td:nth-child(1) {
    width: 80px;
}
table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader-icon1 {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.avatar1 {
    width: 178px;
    height: 50px;
    display: block;
}
.middle-tab-top {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 200px;
}
.middle-bottom {
    position: absolute;
    top: 37px;
    width: 100%;
    bottom: 0px;
    overflow: auto;
}
.middle-tab-bottom {
    position: absolute;
    top: 203px;
    width: 100%;
    bottom: 0px;
    overflow: auto;
}
.poppagetop {
    width: 100%;
    height: 24px;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    position: absolute;
    /* border: 1px solid #ccc; */
    z-index: 999;
}
.poppagecenter {
    position: absolute;
    overflow: auto;
    top: 27px;
    width: 100%;
    height: 450px;
    left: 0;
}
::v-deep .el-select-dropdown__wrap {
    max-width: 400px;
}
::v-deep .vxe-table .vxe-body--row.row--hover td {
    background-color: #d7f1fd;
    vertical-align: top !important;
}
::v-deep .vxe-table.size--mini .vxe-body--column,
.vxe-table.size--mini .vxe-footer--column,
.vxe-table.size--mini .vxe-header--column {
    padding: 1px 0;
    vertical-align: top !important;
}
::v-deep .vxe-table .vxe-sort-wrapper {
    padding: 0 0px;
}
::v-deep .colred {
    background-color: red !important;
}
::v-deep .colgreen {
    background-color: #00ff00 !important;
}
::v-deep .colrow {
    background-color: #c0ffc0;
}
::v-deep .el-input.is-disabled .el-input__inner {
    color: #606266;
    cursor: default;
}
::v-deep .vxe-table .vxe-body--column.col-blue {
    color: blue;
}
::v-deep .vxe-table .vxe-body--column.col-red {
    color: red;
}
.tdclass {
    text-align: left !important;
}

.table2style tr td {
    padding: 0px 2px 0px 2px;
}

table tr td:nth-child(1) {
    width: 80px;
}
</style>